<template>
  <div class="timepicker-item-root">
    <div class="col" ref="colhh">
      <div v-for="n in 24" class="item" :class="{active: hh == n - 1}" @click="changeNum('hh', n - 1)">
        {{n - 1}}
      </div>
    </div>
    <div class="col" ref="colmm">
      <div v-for="n in 60" class="item" :class="{active: mm == n - 1}" @click="changeNum('mm', n - 1)">
        {{n - 1}}
      </div>
    </div>
    <div class="col" ref="colss">
      <div v-for="n in 60" class="item" :class="{active: ss == n - 1}" @click="changeNum('ss', n - 1)">
        {{n - 1}}
      </div>
    </div>
  </div>
</template>

<script>
import moment from 'moment'

export default {
  name: 'timepicker-item-root',
  props: ['value'],
  data(){
    return {
      hh: 0,
      mm: 0,
      ss: 0,
      time: moment()
    }
  },
  mounted(){
    this.value && (this.time = moment(this.value, 'HH:mm:ss'))
    this.update()
    this.$once('changePanel', ()=>{
      this.changeScroll()
    })
  },
  methods: {
    update(){
      this.hh = this.time.hour()
      this.mm = this.time.minute()
      this.ss = this.time.seconds()
      this.upmodel()
    },
    upmodel(){
      this.$emit('input', this.time.format("HH:mm:ss"))
    },
    changeNum(target, n){
      let tFunc = {hh: 'hour', mm: 'minute', 'ss': 'seconds'}[target]
      if(this[target] != n){
        this[target] = n
        this.time[tFunc](n)
        this.upmodel()
      }
    },
    changeScroll(){
      this.$refs.colhh.scrollTop = Math.round((this.hh - 3) * 30)
      this.$refs.colmm.scrollTop = Math.round((this.mm - 3) * 30)
      this.$refs.colss.scrollTop = Math.round((this.ss - 3) * 30)
    }
  }
}
</script>

<style scoped lang="stylus">
.timepicker-item-root
  user-select none
  padding 10px 0
  display flex
  >.col
    width 33%
    height 240px
    overflow auto
    box-sizing border-box
    border-right 1px solid #333333
    text-align center
    font-size 14px
    &:last-child
      border 0
    &::-webkit-scrollbar
      display none
    >.item
      height 30px
      line-height 30px
      cursor pointer
      transition all .3s ease
.timepicker-item-root>.col>.item.active
  background #59b3ff
  font-size 16px
  padding-left 12px
  &::after
    content '时'
    font-size 12px
    margin-left 9px
    vertical-align 2px
.timepicker-item-root>.col:nth-child(2)>.item.active::after
  content '分'
.timepicker-item-root>.col:nth-child(3)>.item.active::after
  content '秒'
</style>